<template>
	<view>
		<view class="flex-row-space-between" style="margin-top: 30rpx;">
			<view class="title">
				乘车人信息
			</view>
			<view @click="emptyClick()" class="empty">
				一键清空
			</view>
		</view>
		<view class="phoneView flex-row-flex-start">
			<view class="left">
				手机号
			</view>
			<input v-model="friendInfo.friend_mobile" class="flex1" type="text" placeholder="请输入乘客人手机号">
		</view>
		<view class="phoneView flex-row-flex-start">
			<view class="left">
				姓名
			</view>
			<input v-model="friendInfo.friend_name" class="flex1" type="text" placeholder="请输入乘客人姓名">
		</view>
		<!-- <view class="title" style="margin-top: 40rpx;">
			支付方式
		</view>
		<view @click="show=true" class="phoneView flex-row-space-between">
			<view class="left">
				<text v-if='friendInfo.who_pay==20'>乘客支付</text>
				<text v-else>本人支付</text>
			</view>
			<image class="image2" src="/static/index/2.png" mode=""></image>
		</view> -->
		<view @click="buttonClick()" class="button flex-row-center">
			提交
		</view>
		
			<u-picker @cancel="modeCancel()" :show="show" :columns="columns" @confirm='click' keyName="label"></u-picker>
	</view>
</template>

<script>
	export default {
		components: {},
		computed: {

		},
		data() {
			return {
				friendInfo:{
					friend_name:'',
					friend_mobile:'',
					who_pay:20,
				},
			border: false,
				show: false,
				columns: [
					['本人支付','乘客支付']
				],
			}
		},
		onShow() {

		},
		onLoad() {
			
		},
		
		methods: {
			emptyClick(){
				this.friendInfo.friend_name=''
				this.friendInfo.friend_mobile=''
			},
			showToast(title){
				uni.showToast({
					title:title,
					icon:'none'
				})
			},
			click(e) {
				console.log(e);
				// this.city = e.value[0]
			console.log(e.indexs[0]);
				if(e.value[0]){
					this.friendInfo.who_pay=30
				}else{
					this.friendInfo.who_pay=20
				}
				
				this.show = false
			},
			modeCancel(){
			this.show=false	
			},
			buttonClick(){
				uni.setStorageSync('friendInfo', this.friendInfo)
				uni.navigateTo({
					url: 'orderDetail'
				})
			},
			clickLeft(){
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss">
.title{
	margin-left: 30rpx;
	font-size: 28rpx;
	// font-family: PingFang SC-Medium, PingFang SC;
	font-weight: 500;
	color: #3D3D3D;
}
.empty{
	margin-right: 30rpx;
	font-size: 28rpx;
	font-family: PingFang SC-Regular, PingFang SC;
	font-weight: 400;
	color: $base-color;
}
.phoneView{
	margin: 0 32rpx;
	margin-top: 30rpx;
	height: 90rpx;
	border-radius: 12rpx 12rpx 12rpx 12rpx;
	opacity: 1;
	border: 2rpx solid #EEEEEE;
}
.left{
	width: 156rpx;
	padding-left: 24rpx;
	font-size: 28rpx;
	font-family: PingFang SC-Regular, PingFang SC;
	font-weight: 400;
	color: #3D3D3D;
}

	.image2 {
		margin-right: 24rpx;
		width: 12rpx;
		height: 12rpx;
	}
input{
	font-size: 28rpx;
	font-family: PingFang SC-Regular, PingFang SC;
	font-weight: 400;
	color: #3D3D3D;
}
.button{
	margin:188rpx 32rpx;
	height: 90rpx;
	background: #26D360;
	border-radius: 12rpx 12rpx 12rpx 12rpx;
	opacity: 1;
	font-size: 28rpx;
	font-family: PingFang SC-Medium, PingFang SC;
	font-weight: 500;
	color: #FFFFFF;
}
</style>
